<template>
  <div class="right-box">
    <div class="bread-box" v-if="title.length">
      <Breadcrumb>
        <BreadcrumbItem v-for="(item,key) in title" :key="key">{{item}}</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <transition :name="transitionName">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      transitionName: "",
      title: []
    };
  },
  watch: {
    $route(to, from) {
      //设置标题
      this.title = to.meta.title ? to.meta.title : [];
      if (to.meta.index > from.meta.index) {
        this.transitionName = "slide-left";
      } else {
        this.transitionName = "slide-right";
      }
    }
  }
};
</script>

<style>
.bread-icon{
  font-size: 12px;
  color: #000;
}
.bread-box{
  margin-bottom: 20px;
}
.right-box {
  width: calc(100% - 160px);
  margin-top: 60px;
  margin-left: 160px;
  padding: 20px;
  position: relative;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms linear;
  position: absolute;
  width: 100%;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
</style>